<script setup>
import { ref } from 'vue';
import {
    Edit,
    Delete
} from '@element-plus/icons-vue'
import { addScoreService, deleteScoreService, listScoreService, updateScoreService } from '../../api/score';
import { ElMessage,ElMessageBox } from 'element-plus';
import { onMounted } from 'vue'

onMounted(() => {
  listScore()
})
//成绩列表模型
const score = ref()
//查询考试信息
const name = ref('')
//添加成绩表单数据模型
const scoreModel = ref({
    scoreDate: '',
    examsMessage: '',
    scoreMath: '',
    scoreEnglish: '',
    scorePhysics: '',
    scoreChemistry: '',
    scoreBiologic: '',
    scoreTotal: '',
})
//分页条数据模型
const pageNum = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(15)//每页条数

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
    pageSize.value = size
    listScore()
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
    pageNum.value = num
    listScore()
}

//控制添加弹窗函数
const visibleDrawer = ref(false)
const showDrawer = () => {
    visibleDrawer.value = true
}
//调用列出成绩接口
const listScore = async () => {
    let params = {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        name: name.value ? name.value : null,
    }
    let result = await listScoreService(params)
    score.value = result.data.items
    total.value = result.data.total
}
//调用添加成绩接口
const addScore = async () => {
    let result = await addScoreService(scoreModel.value)
    ElMessage.success(result.msg ? result.msg : '添加成功！')
    visibleDrawer.value = false
    listScore()
}
//提供管理修改成绩弹窗方法，实现数据回显
const dialogScoreVisible=ref(false)
const showScoreDialog=(row)=>{
    dialogScoreVisible.value=true
    //articleModel.value.title=row.title
    scoreModel.value=row
}
//调用更新成绩方法
const updateScore=async()=>{
    let result=await updateScoreService(scoreModel.value)
    ElMessage.success(result.msg ? result.msg : '修改成功！')
    listScore()
    dialogScoreVisible.value=false
}
//调用删除成绩方法
const deleteScore = (row) => {
    ElMessageBox.confirm(
        '你确认删除该成绩吗？',
        '温馨提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            //用户点击了确认
            await deleteScoreService(row.id)
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
            listScore()
        })
        .catch(() => {
            //用户点击了取消
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}
</script>
<template>
    <div class="header">
        <h3>成绩管理</h3>
        <div>
            <el-button type="primary" @click="listScore()">查询</el-button>
            <el-input v-model="name" style="width: 240px" placeholder="查询考试信息" />
        </div>

        <div class="">
            <el-button type="primary" @click="showDrawer()">添加成绩</el-button>
        </div>
    </div>
    <el-table :data="score" style="width: 100%;">
        <el-table-column label="序号" width="60" type="index"> </el-table-column>
        <el-table-column label="成绩日期" prop="scoreDate" width="200"></el-table-column>
        <el-table-column label="考试信息" prop="examsMessage" width="200"></el-table-column>
        <el-table-column label="语文" prop="scoreChinese"></el-table-column>
        <el-table-column label="数学" prop="scoreMath"></el-table-column>
        <el-table-column label="英语" prop="scoreEnglish"></el-table-column>
        <el-table-column label="物理" prop="scorePhysics"></el-table-column>
        <el-table-column label="化学" prop="scoreChemistry"></el-table-column>
        <el-table-column label="生物" prop="scoreBiologic"></el-table-column>
        <el-table-column label="总分" prop="scoreTotal"></el-table-column>
        <el-table-column label="操作" width="100">
            <template #default="{ row }">
                <el-button :icon="Edit" circle plain type="primary" @click="showScoreDialog(row)"></el-button>
                <el-button :icon="Delete" circle plain type="danger" @click="deleteScore(row)"></el-button>
            </template>
        </el-table-column>
        <template #empty>
            <el-empty description="没有数据" />
        </template>
    </el-table>
    <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[5, 10, 15, 20]"
        :size="size" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
        :total=total @size-change="onSizeChange" @current-change="onCurrentChange" />

    <!-- 添加成绩抽屉 -->
    <el-drawer v-model="visibleDrawer" title="添加成绩" direction="rtl" size="30%">
        <el-form :model="scoreModel" :rules="rules" label-width="100px" style="padding-right: 30px">
            <el-form-item label="成绩日期" prop="scoreDate">
                <el-date-picker v-model="scoreModel.scoreDate" type="date" placeholder="选择一个日期" :size="size" />
            </el-form-item>
            <el-form-item label="考试信息" prop="examsMessage">
                <el-input v-model="scoreModel.examsMessage" minlength="1" maxlength="20"></el-input>
            </el-form-item>
            <el-form-item label="语文" prop="scoreChinese">
                <el-input v-model="scoreModel.scoreChinese" minlength="1" maxlength="3"></el-input>
            </el-form-item>
            <el-form-item label="数学" prop="scoreMath">
                <el-input v-model="scoreModel.scoreMath" minlength="1" maxlength="3"></el-input>
            </el-form-item>
            <el-form-item label="英语" prop="scoreEnglish">
                <el-input v-model="scoreModel.scoreEnglish" minlength="1" maxlength="3"></el-input>
            </el-form-item>
            <el-form-item label="物理" prop="scorePhysics">
                <el-input v-model="scoreModel.scorePhysics" minlength="1" maxlength="3"></el-input>
            </el-form-item>
            <el-form-item label="化学" prop="scoreChemistry">
                <el-input v-model="scoreModel.scoreChemistry" minlength="1" maxlength="3"></el-input>
            </el-form-item>
            <el-form-item label="生物" prop="scoreBiologic">
                <el-input v-model="scoreModel.scoreBiologic" minlength="1" maxlength="3"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="visibleDrawer = false">取消</el-button>
                <el-button type="primary" @click="addScore()"> 确认 </el-button>
            </span>
        </template>
    </el-drawer>
    <!-- 修改成绩弹窗 -->
    <el-dialog v-model="dialogScoreVisible" title="修改成绩" width="800">
        <el-form :model="scoreModel" :rules="rules" label-width="100px" style="padding-right: 30px">
            <el-form-item label="成绩日期" prop="scoreDate">
                <el-date-picker v-model="scoreModel.scoreDate" type="date" placeholder="选择一个日期" :size="size" />
            </el-form-item>
            <el-form-item label="考试信息" prop="examsMessage">
                <el-input v-model="scoreModel.examsMessage" minlength="1" maxlength="20"></el-input>
            </el-form-item>
            <el-form-item label="语文" prop="scoreChinese">
                <el-input v-model="scoreModel.scoreChinese" minlength="1" maxlength="3"></el-input>
            </el-form-item>
            <el-form-item label="数学" prop="scoreMath">
                <el-input v-model="scoreModel.scoreMath" minlength="1" maxlength="3"></el-input>
            </el-form-item>
            <el-form-item label="英语" prop="scoreEnglish">
                <el-input v-model="scoreModel.scoreEnglish" minlength="1" maxlength="3"></el-input>
            </el-form-item>
            <el-form-item label="物理" prop="scorePhysics">
                <el-input v-model="scoreModel.scorePhysics" minlength="1" maxlength="3"></el-input>
            </el-form-item>
            <el-form-item label="化学" prop="scoreChemistry">
                <el-input v-model="scoreModel.scoreChemistry" minlength="1" maxlength="3"></el-input>
            </el-form-item>
            <el-form-item label="生物" prop="scoreBiologic">
                <el-input v-model="scoreModel.scoreBiologic" minlength="1" maxlength="3"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogScoreVisible = false">取消</el-button>
                <el-button type="primary" @click="updateScore()"> 确认 </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<style lang="scss" scoped>
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;

}

.extra {
    position: absolute;
    right: 19px;
}

.column {
    display: flex;
    align-items: center;
    align-self: center;
    align-content: center;

}

.pagination {
    display: flex;
    align-items: center;
    align-self: center;
    align-content: center;
}
</style>